<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #agentIndex {
        color: #444;
        background: #fff;
        padding-bottom: 30px;
        font-size: 12px;
    }


    .shopro-reset-button {
        margin-right: 20px;
    }

    .reject-reason-item {
        width: 140px;
        margin-right: 14px;
    }

    .shopro-edit-cancel {
        color: #848089;
        cursor: pointer;
    }

    .theme-cursor {
        color: #6E3DC8;
        cursor: pointer;
    }

    body .table-image {
        border-radius: 15px;
        width: 30px;
        height: 30px;
        overflow: hidden;
        border: 1px solid #e6e6e6;
    }

    .shopro-refresh-button {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .shopro-screen-item-vague .shopro-screen-condition {
        width: 242px;
    }

    .shopro-screen-item-vague .el-select {
        width: 100px;
    }

    .agent-apply-item-tip {
        font-size: 12px;
        line-height: 12px;
        color: #58575A;
        margin-bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .agent-apply-item {
        margin-bottom: 20px;
    }

    .agent-apply-item-identity {
        width: 153px;
        min-height: 42px;
        background: #E6E6E6;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .agent-apply-item-tip-delete {
        color: #F49300;
        cursor: pointer;
        margin-right: 14px;
    }

    .color-ED655F {
        color: #ED655F;
    }

    .theme-cursor {
        color: #6E3DC8;
        cursor: pointer;
    }

    .color-999 {
        color: #999;
    }

    .color-0ACE97 {
        color: #0ACE97;
    }

    .popover-container .table-image-identity {
        width: 100px;
        height: 60px;
        border-radius: 4px;
    }

    .unit-tip-item {
        color: #626066;
        font-size: 12px;
        margin-left: 6px;
        line-height: 18px;
    }

    .nice-validator .el-input__inner {
        vertical-align: baseline !important;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="agentIndex" v-cloak v-loading="isAjax">
    <div class="shopro-tabs-container">
        <el-tabs v-model="activeTabsName" @tab-click="tabshandleClick">
            <el-tab-pane v-for="tabs in tabsList" :label="tabs.label" :name="tabs.name"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="shopro-screen-container">
        <div class="shopro-button shopro-refresh-button" @click="getListData">
            <i class="el-icon-refresh"></i>
        </div>
        <div class="display-flex shopro-screen-item shopro-screen-item-vague">
            <div class="shopro-screen-condition">
                <el-input placeholder="请输入内容" v-model="searchForm.form_1_value" class="input-with-select" size="small">
                    <el-select v-model="searchForm.form_1_key" slot="prepend" placeholder="请选择">
                        <el-option label="会员ID" value="user_id"></el-option>
                        <el-option label="会员昵称" value="nickname"></el-option>
                        <el-option label="手机号" value="mobile"></el-option>
                    </el-select>
                </el-input>
            </div>
        </div>

        <div class="display-flex shopro-screen-item-button">
            <div class="shopro-button shopro-reset-button" @click="screenEmpty">重置</div>
            <div class="shopro-button shopro-screen-button" @click="handleCurrentChange(1)">筛选</div>
        </div>
    </div>
    <div class="shopro-table-container" v-loading="isAjaxtable">
        <el-table v-if="activeTabsName=='all'" :data="listData" border stripe :cell-class-name="tableCellClassName"
            :header-cell-class-name="tableCellClassName">
            <el-table-column label="ID" prop="user_id" width="70">
            </el-table-column>
            <el-table-column label="代理商信息" width="220">
                <template slot-scope="scope">
                    <div v-if="scope.row.user" class="display-flex">
                        <div class="table-image">
                            <el-image :src="Fast.api.cdnurl(scope.row.user.avatar)" fit="contain">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="ellipsis-item">{{scope.row.user.nickname?scope.row.user.nickname:'-'}}</div>
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="手机号" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.user && scope.row.user.mobile">{{scope.row.user.mobile}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="市级代理" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.area_level == 2">{{scope.row.area_name}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="区县代理" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.area_level == 3">{{scope.row.area_name}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="累计代理奖励积分" min-width="100">
                <template slot-scope="scope">
                    <div>{{scope.row.total_income}}<span class="unit-tip-item">元</span></div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="状态" width="100">
                <template slot-scope="scope">
                    <div class="display-flex">
                        <span v-if="scope.row.status=='normal'" class="display-flex">
                            <span class="shopro-status-dot shopro-status-normal-dot"></span>
                            <span class="shopro-status-normal">{{scope.row.status_text}}</span>
                        </span>
                        <span v-else-if="scope.row.status=='forbidden'" class="display-flex">
                            <span class="shopro-status-dot shopro-status-nonormal-dot"></span>
                            <span class="shopro-status-nonormal">{{scope.row.status_text}}</span>
                        </span>
                        <span v-else-if="scope.row.status=='pending'" class="display-flex">
                            <span class="shopro-status-dot shopro-status-default-dot"></span>
                            <span class="shopro-status-default">{{scope.row.status_text}}</span>
                        </span>
                        <span v-else-if="scope.row.status=='freeze'" class="display-flex">
                            <span class="shopro-status-dot shopro-status-special-dot"></span>
                            <span class="shopro-status-special">{{scope.row.status_text}}</span>
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>
                        {{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="80">
                <template slot-scope="scope">
                    <div class="theme-cursor" @click="operation('edit',scope.row.user_id)">
                        查看
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="shopro-pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage">
        </el-pagination>
    </div>
</div>